<html>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<head>
    <link rel="stylesheet" href="js/layui/css/layui.css">
   <link rel="stylesheet" href="css/login.css">

    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/layui/layui.js"></script>
</head>
<style type="text/css">

</style>
<body>
<form class="layui-form" action="">
<div class="layui-form-item">
    <label class="layui-form-label">用户名</label>
    <div class="layui-input-block">
        <input type="text" name="name" required  lay-verify="required" placeholder="请输入名称" autocomplete="off" class="layui-input">
    </div>
</div>
<div class="layui-form-item">
    <label class="layui-form-label">密码</label>
    <div class="layui-input-inline">
        <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
    </div>
    <div class="layui-form-mid layui-word-aux">辅助文字</div>
</div>
    <div class="layui-form-item">
    <label class="layui-form-label">确认密码</label>
    <div class="layui-input-inline">
        <input type="password" name="password2" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
    </div>
    <div class="layui-form-mid layui-word-aux">辅助文字</div>
</div>

    <div class="layui-form-item">
        <label class="layui-form-label">地址</label>
        <div class="layui-input-inline">
            <select id="pidOptions" lay-filter="pid"  name="pid">

            </select>
        </div>
        <div class="layui-input-inline">
            <select name="sid" lay-filter="sid" id="sidOption">
            </select>
        </div>

        <div class="layui-input-inline">
            <select name="xid" id="xidOption" lay-filter="xid">
            </select>
        </div>
    </div>

<div class="layui-form-item">
    <label class="layui-form-label">爱好</label>
    <div class="layui-input-block">
        <input type="checkbox" name="like" value="xz" title="写作">
        <input type="checkbox" name="like2" value="yd" title="阅读" checked>
        <input type="checkbox" name="like3" value="fd" title="发呆">
    </div>
</div>

<div class="layui-form-item">
    <label class="layui-form-label">性别</label>
    <div class="layui-input-block">
        <input type="radio" name="sex" value="1" title="男">
        <input type="radio" name="sex" value="2" title="女" checked>
    </div>
</div>
    <div class="layui-form-item">
        <label class="layui-form-label">生日</label>
    <div class="layui-input-block">
        <input type="text" class="layui-input" id="birthday" name="birthday">
    </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">身份证号</label>
    <div class="layui-input-block">
        <input type="text" class="layui-input" lay-verify="identity" name="idcard" id="idcard">
    </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">详细地址</label>
    <div class="layui-input-block">
        <input type="text" class="layui-input" name="address" id="address">
    </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">邮箱</label>
    <div class="layui-input-block">
        <input type="text" class="layui-input" id="email" lay-verify="email" name="email">
    </div>
    </div>
<div class="layui-form-item">
    <div class="layui-input-block">
        <input type="button" class="layui-btn" lay-submit lay-filter="addForm" value="注册" />
        <input type="reset" class="layui-btn layui-btn-primary" value="重置"/>

    </div>
</div>
</form>
</body>
<script type="text/javascript">

    layui.use(function (){
        var layer = layui.layer;
        var form =layui.form;
        var laydate=layui.laydate;
        // 监听注册表单的提交事件
        form.on("submit(addForm)",function (re) {
            console.log(re);
            // 验证
            if(re.field.name==""){
                layer.msg("账号不能为空");
                return ;
            }



            var pas=re.field.password;
            var pass=re.field.password2;
            if(pas==""){
                layer.msg("密码不能为空");
                return;

            }
            if (pass==""){
                layer.msg("请确认密码");
                return;


            }
            if (pas!=pass){
                layer.msg("两次密码不一致");
                return;

            }
            var hobbys="";
            if (re.field.like!=undefined){
                hobbys+=re.field.like+",";
            }if (re.field.like2!=undefined){
                hobbys+=re.field.like2+",";
            }if (re.field.like3!=undefined){
                hobbys+=re.field.like3+",";
            }
            if (hobbys.length>0){
                hobbys=hobbys.substr(0,hobbys.length-1);
            }

            re.field.hobbys=hobbys;
            console.log(re.field);
            $.post({
                url:"user/addUser.do",
                data:re.field, /*{"name":re.field.name,"realName":re.field.realName,
                    "sex":re.field.sex,"birthday":re.field.birthday,"img":re.field.img,
                    "hobby":re.field.hobby,"xueli":re.field.xueli},*/
                async:true,
                success:function (c){
                    if (c.data==0){
                        layer.msg("用户名已存在");
                    }
                    if (c.data==1){
                        layer.msg("注册成功");
                        // 提交表单数据
                        layer.closeAll();
                    }
                    else {
                        console.log("处理异常"+c.msg);
                    }
                }
            });


        });

        //初始化函数
        layer.ready(function(){
           selectArea("pidOptions",0);
            laydate.render(
                {
                    elem:"#birthday"
                }
            )
           form.render();
        });
        //三级联动
        function selectArea(elem,pid){
            var datas;
            $.post({
                url:"user/area.do",
                data:{"pid":pid},
                async:false,
                success:function (res){
                    if (res.code===200){
                        datas=res.data;
                        console.log(datas)
                    }else {
                        layer.msg("地区获取失败");
                    }
                }
            });
            var htmls="<option value=\"-1\">请选择</option>";

            for (var i = 0; i <datas.length ; i++) {
                //得到其中的一条数据
                var d=datas[i];
                htmls+="<option value='"+d.id+"'>"+d.name+"</option>";
            }
            $("#"+elem).html(htmls);
        }

        form.on("select(pid)",function (res){
            selectArea("sidOption",res.value);
            $("#xidOption").html("");
            form.render("select");
        })
        form.on("select(sid)",function (res){
            selectArea("xidOption",res.value);
            form.render("select");
        })
    });



</script>
</html>
